<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style type="text/css">
			body {
				font-family: "Helvetica Neue", "Microsoft Yahei";
				background-color: rgb(242, 243, 242);
				padding: 0;
				margin: 0;
			}
			a{
				display: block;
				text-decoration:none !important;
			}
			a:hover, a:focus{
				color: #428bca;
			}
			.main-page {
				background-color: #eef0f1;
			}
			
			.content-header {
				text-align: center;
				height: 40px;
				line-height: 40px;
				font-size: 16px;
				background-color: #565856;
				color: white
			}
			
			.content-page {
				margin: 0px auto;
				width: 100%;
			}
			
			.single-page {
				position: absolute;
				width: 30%;
				background-color: white;
				padding: 10px;
				margin: 10px 10px;
				border: 1px solid red;
			}
			
			.img-container {
				width: 100%;
			}
			
			.img-container img {
				width: 100%;
			}
			
			.img-description {
				color: #3c3b3b;
				width: 90%;
				padding: 5%;
			}
			img.head-logo{
				width: 50px;
			    height: 50px;
			    border-radius: 50%;
			    margin: 0px auto;
			    vertical-align:middle;
			}
			.li-titel,.li-details-titel{
				font-weight: 600;
				font-size: 20px;
			}
			.head-content{
				color: #333;
			}
			.mian-img{
				width: 80%;
				margin: 20px auto;
			}
		</style>
	</head>

	<body>
		<div class="main-page">
			<div class="content-header">
				创建瀑布流布局
			</div>
			<div class="content-page">
				<!--<div class="single-page">
					<a href="javasrcipt:;">
		            <div class="li-titel">
		              <img src="../../images/logo.png"/ class="head-logo">
		              <span>121.2</span>
		            </div>
		            <div class="head-content">广州只有9位玩家攻占咸阳，300万平方公里你能瓜分多少？</div>
		            <img src="../../images/logo.png"/>
		            <div class="li-heat head-content">热度:kh</div>
		          </a>
				</div>-->

				<!--<div class="single-page">
					<div class="img-container">
						<img src="../../images/logo.png">
					</div>

					<div class="img-description">
						two:诗和远方
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="../../images/logo.png">
					</div>

					<div class="img-description">
						three:你的心中是否也会怀着一个世外桃源的理想
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="../../images/logo.png">
					</div>

					<div class="img-description">
						four:蓝色的炫彩
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="../../images/logo.png">
					</div>

					<div class="img-description">
						five:小小的邮递员
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="../../images/logo.png">
					</div>

					<div class="img-description">
						six:不畏将来，不念过去
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="../../images/logo.png">
					</div>

					<div class="img-description">
						seven:萌萌的小狐狸
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="../../images/logo.png">
					</div>

					<div class="img-description">
						eight:聊个天吧！帅哥
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="../../images/logo.png">
					</div>

					<div class="img-description">
						nine:知道最强的武器是什么吗？
					</div>
				</div>

				<div class="single-page">
					<div class="img-container">
						<img src="../../images/logo.png">
					</div>

					<div class="img-description">
						ten:看我，看我
					</div>
				</div>-->
			</div>
		</div>

	</body>
	<script type="text/javascript" src="../../js/jquery.js"></script>
	<script type="text/javascript" src="./jquery.freetile.min.js"></script>
<script type='text/javascript'>
	$.ajax({
            url: 'jsondata.json',
            type: 'get',
            data: {
                page: 1,
                pageSize: 10
            },
            success: function (data) {
            	for (i = 0; i < data.json_data.length; i++) {
//          		var text = '<a href="' + data.json_data[i].url + '">\
//		            <div class="li-titel">\
//		              <img src="../../images/logo.png"/ class="head-logo">\
//		              <span>' + data.json_data[i].source + '</span>\
//		            </div>\
//		            <div class="head-content">' + data.json_data[i].title + '</div>\
//		            <img src="' + data.json_data[i].img + '"/>\
//		            <div class="li-heat head-content">热度:' + data.json_data[i].discover_count + '</div>\
//		          </a>';
		          var text = '<div class="single-page">\
					<a href="' + data.json_data[i].url + '">\
		            <div class="li-titel">\
		              <img src="../../images/logo.png"/ class="head-logo">\
		              <span>' + data.json_data[i].source + '</span>\
		            </div>\
		            <div class="head-content">' + data.json_data[i].title + '</div>\
		            <img src="' + data.json_data[i].img + '" class="mian-img"/>\
		            <div class="li-heat head-content">热度:' + data.json_data[i].discover_count + '</div>\
		          </a>\
				</div>';
				$(".content-page").append(text);
            	}
            	
                console.log(data)
          $(".content-page").freetile({animate:true,elementDelay:30}); 
            }
        })

	
</script>
</html>